<template>
  <div class="data-statistics c6-container">
    <ContentForm name="2C检测数据" :isshowref="isshowrefresh">
      <!--      <div slot="searchform" class="phm-from">-->
      <!--        <div class="form-top">-->
      <!--          <form action="">-->
      <!--            <p class="form-top-p">-->
      <!--              <el-select v-model="valuek.selectSection" class="phm-form" clearable placeholder="选择供电段" @change="line">-->
      <!--                <el-option-->
      <!--                  v-for="item in formz.selectSection"-->
      <!--                  :key="item.value"-->
      <!--                  :label="item.deptName"-->
      <!--                  :value="item.deptName" />-->
      <!--              </el-select>-->
      <!--            </p>-->
      <!--            <p class="form-top-p">-->
      <!--              <el-select v-model="valuek.selectLin" multiple collapse-tags class="phm-form" clearable placeholder="选择线路">-->
      <!--                <el-option-->
      <!--                  v-for="item in formz.selectLin"-->
      <!--                  :key="item.value"-->
      <!--                  :label="item.label"-->
      <!--                  :value="item.value" />-->
      <!--              </el-select>-->
      <!--            </p>-->
      <!--            <p class="form-top-p">-->
      <!--              <el-date-picker-->
      <!--                v-model="valuek.selectShij"-->
      <!--                class="phm-form input-long"-->
      <!--                type="daterange"-->
      <!--                range-separator="至"-->
      <!--                start-placeholder="开始日期"-->
      <!--                end-placeholder="结束日期"-->
      <!--                value-format="yyyy-MM-dd" />-->
      <!--            </p>-->
      <!--            <p class="form-top-p">-->
      <!--              <el-button type="primary" size="mini" class="form-button" icon="el-icon-search" @click="onSubmit()">查询</el-button>-->
      <!--            </p>-->
      <!--          </form>-->
      <!--        </div>-->
      <!--      </div>-->
      <div slot="valueform" class="tableContainer widthPage v-flex-elastic" :class="{ foremZank: isActive }" style="height: calc(100%);">
        <div class="form-top">
          <form action="">
            <p class="form-top-p">
              <el-select v-model="valuek.selectSection" class="phm-form" clearable placeholder="选择供电段" @change="line">
                <el-option
                  v-for="item in formz.selectSection"
                  :key="item.value"
                  :label="item.deptName"
                  :value="item.deptName" />
              </el-select>
            </p>
            <p class="form-top-p">
              <el-select v-model="valuek.selectLin" style="width: 130px;" multiple collapse-tags class="phm-form" clearable placeholder="选择线路">
                <el-option
                  v-for="item in formz.selectLin"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value" />
              </el-select>
            </p>
            <p class="form-top-p">
              <el-date-picker
                v-model="valuek.selectShij"
                style="width: 250px;"
                class="phm-form input-long"
                type="daterange"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                value-format="yyyy-MM-dd" />
            </p>
            <p class="form-top-p">
              <el-button type="primary" size="mini" class="form-button" icon="el-icon-search" @click="onSubmit()">查询</el-button>
              <el-button
                class="refresh-btn"
                size="mini"
                type="primary"
                icon="el-icon-refresh"
                @click="resetListQuery">重置</el-button>
            </p>
          </form>
        </div>
        <div style="height: calc(100% - 37px);">
          <el-table
            v-if="showTable"
            v-loading="loading"
            :data="tableDataDefect"
            height="100%"
            border
            stripe
            @sort-change="sortTable">
            <el-table-column
              label="序号"
              type="index"
              width="50"
              align="center" />
            <el-table-column
              prop="section"
              label="部门"
              sortable
              width="100"
              top
              align="center" />
            <el-table-column
              prop="lineAttr.lineName"
              label="线路"
              sortable="custom"
              width="120"
              align="center" />
            <el-table-column
              prop="directionAttr.directionName"
              label="行别"
              align="center"
              sortable="custom"
              width="90" />
            <el-table-column
              prop="beginSiteAttr.siteName"
              label="计划起站"
              align="center"
              sortable
              width="100" />
            <el-table-column
              prop="endSiteAttr.siteName"
              label="计划止站"
              align="center"
              sortable
              width="100" />
            <el-table-column
              prop="detectDate"
              label="检测日期"
              sortable="custom"
              width="120"
              align="center" />
            <el-table-column
              prop="packetName"
              label="数据包"
              sortable="custom"
              show-overflow-tooltip
              align="center" />
            <el-table-column
              prop="packageSize"
              label="数据包大小(KB)"
              width="120"
              align="center" />
            <el-table-column
              width="80"
              align="center"
              fixed="right">
              <template slot="header">
                操作
              </template>
              <template slot-scope="scope">
                <a class="el-icon-view" @click="showDetail(tableDataDefect[scope.$index].id, tableDataDefect[scope.$index].detectDate)" />
              </template>
            </el-table-column>
          </el-table>
        </div>
        <div class="block">
          <Pagination
            :hidden="false"
            :total="total"
            :page.sync="queryParams.page"
            :size.sync="queryParams.size"
            @pagination="getC2DataByParams" />
        </div>
      </div>

    </ContentForm>
    <div class="phm-tanc" :class="{ phmtancshow: isActive }">
      <p class="phm-tanc-top"><span class="el-icon-close" @click="isActive=!isActive" />2C数据播放</p>
      <A2C v-if="isActive" :show-pillar-pager="true" style="height: calc(100% - 42px);" :detect-job-id="detectJobId" />
    </div>
  </div>
</template>

<script>
// 检测数据查询
import A2C from './A2cModalCopy.vue'
import ContentForm from '@/components/ContentForm'
import { line, getListSection } from '@/api/cms/detect-data/basic'
import { find2cDetectData } from '@/api/cms/detect-data'
export default {
  components: {
    A2C,
    ContentForm
  },
  props: {
    lineCode: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      isshowrefresh: true,
      routequery: null,
      showTable: false,
      value1: '',
      play: false,
      isActive: false,
      fomSlect1: '',
      tableDataDefect: [],
      loading: true,
      total: 0,
      queryParams: {
        page: 1,
        size: 20,
        lineCode: this.lineCode
      },
      valuek: {
        selectSection: '', // 所选得供电段
        selectLin: [], // 选择线路
        selectShij: [] // 时间
      },
      formz: {
        selectLin: [],
        selectSection: []// 所选得供电段
      },
      detectJobId: '',
      date: ''
    }
  },
  watch: {
    lineCode(val) {
      if (val) {
        this.valuek.selectLin = val
        this.queryParams.lineCode = val
        this.getC2DataByParams()
      }
    }
  },
  activated() {
    this.showTable = true
  },
  deactivated() {
    this.showTable = false
  },
  mounted() {
    /* const data = []
    for (let i = 0; i < 20; i++) {
      const line = this.PHMTESTDATA.phmvariable.line[parseInt(Math.random() * 4.9)]
      data.push({
        indexph: '2019-05-' + (10 + i),
        device: line,
        line: '下行',
        stream: '2019-05-' + (10 + i) + ' ' + line + ' 下行',
        station: '无'
      })
    }
    this.tableDataDefect = data*/
    this.routequery = this.$route.query
    if (this.routequery.date) {
      this.isshowrefresh = false
      this.getlist(this.routequery)
    } else {
      this.getC2DataByParams()
    }
    if (this.lineCode) {
      this.valuek.selectLin = this.lineCode
    }
    getListSection().then(res => {
      this.formz.selectSection = res.data
    })

    this.line()
  },
  methods: {
    getlist(val) {
      this.valuek.selectSection = val.dept && val.dept !== '全部' ? val.dept : ''
      this.valuek.selectLin = val.line[0] ? val.line : []
      const obj = [val.date.split('-')[0], val.date.split('-')[1]]
      var aa = ''; var bb = ''
      if (obj[1] === '4' || obj[1] === '6' || obj[1] === '9' || obj[1] === '11') {
        if (obj[1] === '11') {
          aa = obj[0] + '-' + obj[1] + '-01'
          bb = obj[0] + '-' + obj[1] + '-30'
        } else {
          aa = obj[0] + '-0' + obj[1] + '-01'
          bb = obj[0] + '-0' + obj[1] + '-30'
        }
      } else if (obj[1] === '2') {
        if (Number(obj[0]) % 4 === 0) {
          aa = obj[0] + '-0' + obj[1] + '-01'
          bb = obj[0] + '-0' + obj[1] + '-29'
        } else {
          aa = obj[0] + '-0' + obj[1] + '-01'
          bb = obj[0] + '-0' + obj[1] + '-28'
        }
      } else {
        if (obj[1] === '10' || obj[1] === '12') {
          aa = obj[0] + '-' + obj[1] + '-01'
          bb = obj[0] + '-' + obj[1] + '-31'
        } else {
          aa = obj[0] + '-0' + obj[1] + '-01'
          bb = obj[0] + '-0' + obj[1] + '-31'
        }
      }
      this.valuek.selectShij = [aa, bb]
      this.onSubmit()
    },
    getItme(index) {
      this.activeClass = index
    },
    handleEdit(row) {
      console.log(row)
    },
    formtanc: function() {
      this.play = !this.play // 取反
    },
    getC2DataByParams(params) {
      this.loading = true
      params = params || {}
      this.queryParams = Object.assign({}, this.queryParams, params)
      // this.$emit('findDetectData', this.queryParams)
      find2cDetectData(this.queryParams).then(response => {
        // console.log('2C检测数据查询', response)
        if (response.data) {
          this.tableDataDefect = response.data.records
          this.total = response.data.total
        }
        this.loading = false
      }).catch(_ => {
        this.loading = false
      })
    },
    getSearchCondition(val) {
      const line = val.selectLin
      const lineCode = line.split('-')[1]
      this.queryParams.lineCode = lineCode
      const time = val.selectShij
      if (time && time.length) {
        const startDate = time[0]
        const endDate = time[1]
        this.queryParams.startDate = startDate
        this.queryParams.endDate = endDate
      }
      this.getC2DataByParams()
    },
    line(val) {
      let value = { id: '' }
      if (val) {
        value = this.formz.selectSection.find((ele) => {
          return ele.deptName === val
        })
      }
      const obj = {
        deptId: value.id
      }
      this.valuek.selectLin = []
      line(obj).then(response => {
        // console.log('线路下拉框', response)
        const lines = []
        if (response.data) {
          response.data.forEach(item => {
            const line = {}
            line.value = item.lineCode
            line.label = item.lineName
            lines.push(line)
          })
        }
        this.formz.selectLin = lines
      })
    },
    onSubmit() {
      const lineCode = this.valuek.selectLin
      this.queryParams.lineCode = lineCode
      this.queryParams.lineCode = ''
      for (const item of lineCode) {
        this.queryParams.lineCode = this.queryParams.lineCode + item + ','
      }
      this.queryParams.lineCode = this.queryParams.lineCode.substring(0, this.queryParams.lineCode.length - 1)
      this.queryParams.deptName = this.valuek.selectSection
      const time = this.valuek.selectShij
      if (time && time.length) {
        const startDate = time[0]
        const endDate = time[1]
        this.queryParams.startDate = startDate
        this.queryParams.endDate = endDate
      } else {
        delete this.queryParams.startDate
        delete this.queryParams.endDate
      }
      this.getC2DataByParams()
    },
    showDetail(id, date) {
      this.detectJobId = id
      this.isActive = !this.isActive
    },
    sortTable({ column, prop, order }) {
      const sort = order === 'descending' ? -1 : (order === 'ascending' ? 1 : '')
      switch (prop) {
        case 'detectDate':
          this.getC2DataByParams({ dateSort: sort })
          break
        case 'lineAttr.lineName':
          this.getC2DataByParams({ lineSort: sort })
          break
        case 'directionAttr.directionName':
          this.getC2DataByParams({ directionSort: sort })
          break
        case 'packetName':
          this.getC2DataByParams({ packNameSort: sort })
          break
        case 'packageSize':
          this.getC2DataByParams({ packSizeSort: sort })
          break
        default:
          this.getC2DataByParams()
          break
      }
    },
    resetListQuery() {
      this.valuek = {
        selectSection: '',
        selectLin: [], // 选择线路
        selectShij: [] // 时间
      }
    }
  }
}
</script>
